<{extend name="Public:public" /}>

<{block name="title"}>组件之间传值 vue-cli<{/block}>

<{block name="content"}> 
<div class="content guide with-sidebar components-props-guide">

<h1>组件之间传值 vue-cli</h1>
  
<h2 id="fatherToChildren"> 
	<a href="#fatherToChildren" class="headerlink" title="fatherToChildren" data-scroll="">父组件 传 子组件</a> 
</h2>
<p>父组件通过 属性传递</p>
<p>子组件通过 <code>props</code> 接收, 同 <code>data</code> 功能一样</p>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="com">//&nbsp;父组件</span></li><li class="L1"><span class="str">&lt;template&gt;</span></li><li class="L2"><span class="pln">&nbsp;&nbsp;</span><span class="pun">&lt;</span><span class="pln">div&nbsp;id</span><span class="pun">=</span><span class="str">"page"</span><span class="pun">&gt;</span></li><li class="L3"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="pun">&lt;</span><span class="pln">c</span><span class="pun">-</span><span class="pln">modal&nbsp;</span><span class="pun">:</span><span class="pln">m</span><span class="pun">-</span><span class="pln">show</span><span class="pun">=</span><span class="str">"mShow1"</span><span class="pln">&nbsp;</span><span class="pun">:</span><span class="pln">m</span><span class="pun">-</span><span class="pln">content</span><span class="pun">=</span><span class="str">"mContent1"</span><span class="pun">&gt;&lt;/</span><span class="pln">c</span><span class="pun">-</span><span class="pln">modal</span><span class="pun">&gt;</span></li><li class="L4"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="pun">&lt;</span><span class="pln">c</span><span class="pun">-</span><span class="pln">modal&nbsp;m</span><span class="pun">-</span><span class="pln">show</span><span class="pun">=</span><span class="str">"mShowString"</span><span class="pln">&nbsp;m</span><span class="pun">-</span><span class="pln">content</span><span class="pun">=</span><span class="str">"mContentString"</span><span class="pun">&gt;&lt;/</span><span class="pln">c</span><span class="pun">-</span><span class="pln">modal</span><span class="pun">&gt;</span></li><li class="L5"><span class="pln">&nbsp;&nbsp;</span><span class="pun">&lt;</span><span class="str">/div&gt;</span></li><li class="L6"><span class="str">&lt;/</span><span class="kwd">template</span><span class="pun">&gt;</span></li><li class="L7"><span class="pln">&nbsp;</span></li><li class="L8"><span class="com">//&nbsp;m-show&nbsp;对应&nbsp;mShow&nbsp;&nbsp;&nbsp;&nbsp;m-content&nbsp;对应&nbsp;mContent</span></li><li class="L9"><span class="com">//&nbsp;注意&nbsp;:m-show&nbsp;和&nbsp;m-show的区别</span></li></ol></code>

<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="com">//&nbsp;子组件</span></li><li class="L1"><span class="str">&lt;template&gt;</span></li><li class="L2"><span class="pln">&nbsp;&nbsp;</span><span class="pun">&lt;</span><span class="pln">div&nbsp;</span><span class="kwd">class</span><span class="pun">=</span><span class="str">"cmodal"</span><span class="pln">&nbsp;v</span><span class="pun">-</span><span class="pln">show</span><span class="pun">=</span><span class="str">"mShow"</span><span class="pun">&gt;{{</span><span class="pln">mContent</span><span class="pun">}}&lt;/</span><span class="pln">div</span><span class="pun">&gt;</span></li><li class="L3"><span class="pun">&lt;</span><span class="str">/template&gt;</span></li><li class="L4"><span class="str">&lt;script&gt;</span></li><li class="L5"><span class="str">&nbsp;&nbsp;export&nbsp;default&nbsp;{</span></li><li class="L6"><span class="str">&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'CModal',</span></li><li class="L7"><span class="str">&nbsp;&nbsp;&nbsp;&nbsp;props:&nbsp;[</span></li><li class="L8"><span class="str">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'mShow','mContent'</span></li><li class="L9"><span class="str">&nbsp;&nbsp;&nbsp;&nbsp;]</span></li><li class="L0"><span class="str">&nbsp;&nbsp;&nbsp;&nbsp;props:&nbsp;{</span></li><li class="L1"><span class="str">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mShow:&nbsp;Boolean,</span></li><li class="L2"><span class="str">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mContent:&nbsp;String</span></li><li class="L3"><span class="str">&nbsp;&nbsp;&nbsp;&nbsp;}</span></li><li class="L4"><span class="str">&nbsp;&nbsp;}</span></li><li class="L5"><span class="str">&lt;/</span><span class="pln">script</span><span class="pun">&gt;</span></li></ol></code>
<br><br>

<h2 id="childrenToFather"> 
	<a href="#childrenToFather" class="headerlink" title="childrenToFather" data-scroll="">子组件 传 父组件</a> 
</h2>
<p>子组件 通过调用 <code>$emit</code> 事件 向 父组件传值</p>
<p>父组件 通过绑定事件 <code>@emit...</code> 接收 子组件的传值</p>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="com">//&nbsp;子组件</span></li><li class="L1"><span class="str">&lt;template&gt;</span></li><li class="L2"><span class="pln">&nbsp;&nbsp;</span><span class="pun">&lt;</span><span class="pln">div&nbsp;</span><span class="kwd">class</span><span class="pun">=</span><span class="str">"cmodal"</span><span class="pun">&gt;</span></li><li class="L3"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="pun">&lt;</span><span class="pln">button&nbsp;</span><span class="kwd">class</span><span class="pun">=</span><span class="str">"btn-submit"</span><span class="pln">&nbsp;</span><span class="lit">@click</span><span class="pun">=</span><span class="str">"click_submit"</span><span class="pun">&gt;确定&lt;/</span><span class="pln">button</span><span class="pun">&gt;</span></li><li class="L4"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="pun">&lt;</span><span class="pln">button&nbsp;</span><span class="kwd">class</span><span class="pun">=</span><span class="str">"btn-cancel"</span><span class="pln">&nbsp;</span><span class="lit">@click</span><span class="pun">=</span><span class="str">"$emit('emit_cancel')"</span><span class="pun">&gt;取消&lt;/</span><span class="pln">button</span><span class="pun">&gt;</span></li><li class="L5"><span class="pln">&nbsp;&nbsp;</span><span class="pun">&lt;</span><span class="str">/div&gt;</span></li><li class="L6"><span class="str">&lt;/</span><span class="kwd">template</span><span class="pun">&gt;</span></li><li class="L7"><span class="str">&lt;script&gt;</span></li><li class="L8"><span class="pln">&nbsp;&nbsp;</span><span class="kwd">export</span><span class="pln">&nbsp;</span><span class="kwd">default</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L9"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;methods</span><span class="pun">:</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L0"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;click_submit&nbsp;</span><span class="pun">()</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L1"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">$emit</span><span class="pun">(</span><span class="str">'emit_submit'</span><span class="pun">,</span><span class="pln">&nbsp;</span><span class="str">'param'</span><span class="pun">)</span><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="com">//&nbsp;传递参数&nbsp;父组件通过$event接收</span></li><li class="L2"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="pun">}</span></li><li class="L3"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="pun">}</span></li><li class="L4"><span class="pln">&nbsp;&nbsp;</span><span class="pun">}</span></li><li class="L5"><span class="pun">&lt;/</span><span class="pln">script</span><span class="pun">&gt;</span></li></ol></code>

<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="com">//&nbsp;父组件</span></li><li class="L1"><span class="str">&lt;template&gt;</span></li><li class="L2"><span class="pln">&nbsp;&nbsp;</span><span class="pun">&lt;</span><span class="pln">c</span><span class="pun">-</span><span class="pln">modal&nbsp;</span><span class="lit">@emit_cancel</span><span class="pun">=</span><span class="str">"emit_mCancel1"</span><span class="pln">&nbsp;</span><span class="lit">@emit_submit</span><span class="pun">=</span><span class="str">"emit_mSubmit1($event)"</span><span class="pun">&gt;&lt;/</span><span class="pln">c</span><span class="pun">-</span><span class="pln">modal</span><span class="pun">&gt;</span></li><li class="L3"><span class="pun">&lt;</span><span class="str">/template&gt;</span></li><li class="L4"><span class="str">&lt;script&gt;</span></li><li class="L5"><span class="str">&nbsp;&nbsp;export&nbsp;default&nbsp;{</span></li><li class="L6"><span class="str">&nbsp;&nbsp;&nbsp;&nbsp;methods:&nbsp;{</span></li><li class="L7"><span class="str">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;emit_mCancel1&nbsp;()&nbsp;{</span></li><li class="L8"><span class="str">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},</span></li><li class="L9"><span class="str">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;emit_mSubmit1&nbsp;($event)&nbsp;{</span></li><li class="L0"><span class="str">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</span></li><li class="L1"><span class="str">&nbsp;&nbsp;&nbsp;&nbsp;}</span></li><li class="L2"><span class="str">&nbsp;&nbsp;}</span></li><li class="L3"><span class="str">&lt;/</span><span class="pln">script</span><span class="pun">&gt;</span></li></ol></code>






</div>
<{/block}>
